<template>
  <div class="article-container">
    <!-- 导航栏 -->

    <van-nav-bar @click-left="$router.go(-1)" placeholder fixed>
      <template #left>
        <van-icon name="down" size="25" />
      </template>
    </van-nav-bar>
    <!-- /导航栏 -->
    <!-- 文章详情 -->
    <div class="detail">
      <h3 class="title">{{ article.title }}</h3>
      <div class="author">
        <img
          :src="'http://localhost:1337' + nickimg()"
          alt=""
          width="30px"
          height="30px"
        />
        <div class="text">
          <p class="name">{{ nickname() }}</p>
        </div>
        <div class="read"><van-icon name="eye-o" />{{ article.read }}</div>
        <div class="dianzan">
          <van-icon
            name="good-job-o"
            :class="{ red: star.list && star.list.indexOf(+id) != -1 }"
            @click="articlesstar"
          />
          {{ article.star }}
        </div>
      </div>
      <div class="content">
        <div v-html="article.content"></div>
      </div>
    </div>
    <!-- 评论 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="comment">
        <span class="comment1">评论</span>
        <span class="comment2">87</span>
      </div>

      <div class="detail" v-for="item in comment" :key="item.id">
        <div class="author">
          <van-image
            v-if="item.author.avatar"
            round
            width="1rem"
            height="1rem"
            fit="fill"
            :src="'http://localhost:1337' + item.author.avatar"
          />
          <van-image
            round
            width="1rem"
            height="1rem"
            fit="fill"
            v-else
            src="../../assets/u=2918262228,3321512008&fm=26&fmt=auto.webp"
          />
          <div class="text">
            <p class="name">{{ item.author.nickname }}</p>
            <p class="time">4天前</p>
          </div>
          <div class="zan">
            <span>{{ item.star }}</span> <van-icon name="good-job-o" />
          </div>
        </div>
        <div class="content conted">
          <div @click="reCommnent(item.id)">{{ item.content }}</div>
        </div>
        <div class="pinglun">
          <div
            class="pinlin2"
            v-for="(value, index) in item.children_comments"
            :key="index"
          >
            <span>{{ value.author }}:</span><span>{{ value.content }}</span>
          </div>
        </div>
      </div>
    </van-list>
    <!-- 工具栏 -->
    <div class="searchModel">
      <van-tabbar v-model="active" route placeholder>
        <van-button @click="showPopup = true">我来补充两句</van-button>
        <div class="t2">
          <div class="iconfont" @click="Collect">
            <van-icon
              name="star-o"
              :class="{
                red: Collectlll.list && Collectlll.list.indexOf(+id) != -1
              }"
            />
          </div>
          <div class="num">{{ article.collect }}</div>
        </div>
        <div class="t2">
          <div class="iconfont">
            <van-icon
              name="good-job-o"
              :class="{ red: star.list && star.list.indexOf(+id) != -1 }"
              @click="articlesstar"
            />
          </div>
          <div class="num">{{ article.star }}</div>
        </div>
        <div class="t2">
          <div class="iconfont"><van-icon name="guide-o" /></div>
          <div class="num">{{ article.share }}</div>
        </div>
      </van-tabbar>
    </div>
    <van-popup v-model="showPopup" position="bottom" round>
      <div class="send">
        <van-field
          class="field"
          v-model="filedValue"
          type="textarea"
          rows="4"
          placeholder="我来说两句两句"
        ></van-field>
        <div class="send-btn" @click="send">发送</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import moment from 'moment'
import {
  technicParticulars,
  technicComments,
  articlescommentsApi,
  articlesStarApi,
  articlesCollectApi
} from './exercise'
export default {
  name: 'myarticle',
  data () {
    return {
      id: this.$route.query.id,
      article: {},
      comment: [],
      showPopup: false,
      filedValue: '',
      active: 0,
      parent: '',
      loading: false,
      finished: false,
      currentPage: 0,
      pagesize: 1,
      star: [],
      Collectlll: []
    }
  },
  computed: {
    nickname () {
      return function () {
        if (this.article.author) {
          return this.article.author.nickname
        }
      }
    },
    nickimg () {
      return function () {
        if (this.article.author) {
          return this.article.author.avatar
        }
      }
    }
  },
  methods: {
    //收藏
    async Collect () {
      let res = await articlesCollectApi({ id: this.id })
      this.Collectlll = res.data.data
      if (this.Collectlll.list.includes(+this.id)) {
        this.article.collect++
        this.$toast.success('收藏文章成功')
      } else {
        this.article.collect--
        this.$toast.success('取消收藏文章成功')
      }
    },
    //点赞
    async articlesstar () {
      let res = await articlesStarApi({
        article: this.id
      })
      this.article.star = res.data.data.num
      this.star = res.data.data
      if (this.star.list.indexOf(+this.id) != -1) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.success('取消点赞成功')
      }
    },
    //评论列表
    async onLoad () {
      this.currentPage++
      let qur = {
        start: (this.currentPage - 1) * this.pagesize,
        limit: this.pagesize
      }
      let res = await technicComments(this.id, qur)
      console.log(res)
      this.comment.push(...res.data.data.list)
      this.loading = false
      if (this.comment.length >= res.data.data.total) {
        this.loading = false
        this.finished = true
      }
    },
    reCommnent (id) {
      this.parent = id
      this.showPopup = true
    },
    //发送
    async send () {
      let res = await articlescommentsApi({
        content: this.filedValue,
        article: this.id,
        parent: this.parent
      })

      this.$toast.success('发表评论成功')

      this.showPopup = false
      this.$router.go(0)
      // this.onLoad()
    },
    async technic () {
      let res = await technicParticulars(this.id)
      this.article = res.data.data
      console.log(res)
    }
  },
  created () {
    this.technic()
    // this.Comments()
  },
  filters: {
    mymoment (value) {
      return moment(value).format('YYYY-MM-DD')
    }
  }
}
</script>

<style lang="less" scoped>
.red {
  color: red !important;
}
.send {
  text-align: right;
  font-size: 30px;
  margin: 30px;
  .field {
    background: #f7f4f5;
  }
}
.comment {
  overflow: hidden;
  zoom: 1;
  margin: 0 30px;
  .comment1 {
    font-size: 36px;
    font-weight: 600;
  }
  .comment2 {
    font-size: 18px;
    font-weight: 600;
    color: #b4b4bd;
    margin-left: 10px;
    position: absolute;
  }
}
.searchModel {
  margin: 0 50px;
  button.van-button.van-button--default.van-button--normal {
    background: #f7f4f5;
    flex: 1;
    margin: 0 30px;
    border-radius: 20px;

    .van-button__text {
      color: #b4b4bd;
      text-align: left;
    }
  }
  .iconfont {
    .van-icon {
      transform: rotate(0deg);
      margin: 5px;
      font-size: 40px;
    }
  }
  .num {
    font-size: 12px;
  }
  .t2 {
    text-align: center;
    margin-left: 30px;
  }
}
.van-icon {
  transform: rotate(90deg);
  color: #222;
}
.article-container {
  position: absolute;
  left: 0;
  top: 0;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}
.article-loading {
  padding-top: 100px;
  text-align: center;
}
.error {
  padding-top: 100px;
  text-align: center;
}
.detail {
  padding: 20px 30px;
  .title {
    font-size: 36px;
    font-weight: 600;
  }
  .zan {
    margin-top: 30px;
    font-size: 20px;
    .van-icon {
      transform: rotate(0deg);
      font-size: 35px;
    }
  }
  .author {
    img {
      border-radius: 50%;
    }
    padding: 10px 0;
    display: flex;
    font-size: 18px;
    color: #999;
    .read {
      margin-right: 20px;
      margin-top: 15px;
    }
    .dianzan {
      margin-top: 15px;
    }
    .van-icon {
      transform: rotate(0deg);
      margin: 5px;
      font-size: 26px;
    }
    .text {
      flex: 1;
      margin-top: 20px;
      padding-left: 10px;
      line-height: 1.3;
      .name {
        margin: 0;
      }
      .time {
        margin: 0;
        font-size: 12px;
        color: #999;
      }
    }
  }
  .content {
    font-size: 32px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: justify;
    color: #181a39;
    line-height: 54px;
    letter-spacing: 0px;
    // overflow: hidden;
    // white-space: pre-wrap;
    // word-break: break-all;
  }
  .conted {
    margin-left: 85px;
    font-size: 30px;
    margin-top: 20px;
    font-weight: 700;
    color: #181a39;
  }
  .pinglun {
    background: #f7f4f5;
    margin: 30px 10px 30px 85px;
    border-radius: 15px;
    .pinlin2 {
      margin: 40px 40px;
      span:nth-child(1) {
        font-size: 30px;
        font-weight: 500;
        color: #545671;
      }
      span:nth-child(2) {
        font-size: 30px;
        font-weight: 500;
        color: rgb(109, 110, 123);
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
      }
    }
  }
}
</style>
